<div [@routerTransition] class="qmdq">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>质量数据查询</span>
                </h3>
                <span class="m-section__sub">
                    <!-- {{"OrganizationUnitsHeaderInfo" | localize}} -->
                </span>
            </div>

        </div>
    </div>
    <div class="m-content">
        <div class="ui-g">
            <div class="ui-g-4">
                <p-tabView>
                    <p-tabPanel header="BOP查询" [selected]="true">
                        <div class="ui-g">
                            <div class="ui-g-5">
                                <span style="margin-right: 5px;">型号：</span>
                                <p-dropdown [options]="Models" [(ngModel)]="modelValue" filter="true"
                                    placeholder="请选择型号" emptyFilterMessage="暂无数据" (onChange)="onChange($event)">
                                    <ng-template let-item pTemplate="selectedItem">
                                        <span style="vertical-align:middle; margin-left: .3em">{{item.label}}</span>
                                    </ng-template>
                                    <ng-template let-model pTemplate="item">
                                        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                            <div style="font-size:14px;float:right;margin-top:4px">{{model.label}}</div>
                                        </div>
                                    </ng-template>
                                </p-dropdown>
                            </div>
                            <div class="ui-g-5">
                                <span style="margin-right: 5px;">发次：</span>
                                <p-dropdown [options]="LotNoList" [(ngModel)]="lotNo" filter="true" placeholder="请选择发次"
                                    emptyFilterMessage="暂无数据">
                                    <ng-template let-item pTemplate="selectedItem">
                                        <span style="vertical-align:middle; margin-left: .3em">{{item.label}}</span>
                                    </ng-template>
                                    <ng-template let-fc pTemplate="item">
                                        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                            <div style="font-size:14px;float:right;margin-top:4px">{{fc.label}}</div>
                                        </div>
                                    </ng-template>
                                </p-dropdown>
                            </div>
                            <div class="ui-g-2">
                                <p-button label="搜索" (onClick)="treeSearch()"></p-button>
                            </div>
                        </div>
                        <div style="height: 680px;overflow: auto;">
                            <p-tree [value]="treeData" selectionMode="single" [(selection)]="selectedFiles"
                            (onNodeSelect)="nodeSelect($event)" [style]="{ height: '90%'}" [loading]="loadingtree">
                            <ng-template let-node pTemplate="default">
                                <img class="imgcontent"
                                    [src]="(node.nodeLevel==8||node.nodeLevel==9)?'../../../assets/common/images/三级图标.png':node.isLeaf==1?'../../../assets/common/images/二级图标.png':'../../../assets/common/images/一级图标.png'"
                                    width="20" height="20" />
                                <span
                                    *ngIf="node.key==-1">{{node.model}}-{{node.lotNo}}-{{node.nodeDrawingNo}}-{{node.nodeName}}-{{node.stageSign}}</span>
                                <span *ngIf="node.key!=-1">{{node.nodeDrawingNo}}-{{node.nodeName}}</span>
                                <span class="ptagisExport" *ngIf="node.isReturn==1">{{node.isReturn==1?'已回传':''}}</span>
                            </ng-template>
                            </p-tree>
                        </div>
                    </p-tabPanel>
                </p-tabView>
            </div>
            <div class="ui-g-8">
                <p-tabView>
                    <p-tabPanel header="详情" [selected]="true">
                        <form>
                            <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px">
                                <div class="ui-grid-row" style="margin: 5px 0 5px ;">
                                    <div class="ui-grid-col-1">
                                        图号:
                                    </div>
                                    <div class="ui-grid-col-3">
                                        <input type="text" placeholder="请输入图号" name="FisrtDrawingNum" size="30"
                                            pInputText [(ngModel)]="FisrtDrawingNum" class="form-control" />
                                    </div>
                                    <div class="ui-grid-col-1">
                                        零件编号:
                                    </div>
                                    <div class="ui-grid-col-3">
                                        <input type="text" placeholder="请输入零件编号" name="SecondDrawingNum" size="30"
                                            pInputText [(ngModel)]="SecondDrawingNum" class="form-control" />
                                    </div>
                                    <div class="ui-grid-col-1">
                                        表名:
                                    </div>
                                    <div class="ui-grid-col-3" style="margin-top: -3px;">
                                        <p-multiSelect selectedItemsLabel="已选择 {0} 列" styleClass="form-control"
                                            [options]="genders" defaultLabel="请选择表名" [(ngModel)]="tablemodel"
                                            name="tablename" [panelStyle]="{minWidth:'12em'}"></p-multiSelect>
                                    </div>
                                </div>
                                <div class="ui-grid-row" style="margin: 5px 0 5px ;">
                                    <div class="ui-grid-col-1">
                                        记录项目:
                                    </div>
                                    <div class="ui-grid-col-3">
                                        <input type="text" name="RecordElementStr" placeholder="请输入记录项目" size="30"
                                            pInputText [(ngModel)]="RecordElementStr" class="form-control" />
                                    </div>
                                    <div class="ui-grid-col-1">
                                        工具编号:
                                    </div>
                                    <div class="ui-grid-col-3">
                                        <input type="text" name="ToolUsed" placeholder="请输入工具编号" size="30" pInputText
                                            [(ngModel)]="ToolUsed" class="form-control" />
                                    </div>
                                    <div class="ui-grid-col-4">
                                        <p-button label="搜索" (onClick)="searchRight()" style="margin-right: 30px;">
                                        </p-button>
                                        <p-button style="margin-right: 30px;" *ngIf="'Pages.QualityQuery.Export' | permission" label="导出" (onClick)="exportToExcel()"></p-button>
                                        <p-button *ngIf="'Pages.QualityQuery.Export' | permission" label="报表导出" (onClick)="export()"></p-button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="m-portlet__body ui-g-12 gt" *ngIf="workStepData != null">
                            <p-tabView (onChange)="onTabChange($event)">

                                <p-tabPanel [header]="tableitem.tableName"
                                    *ngFor="let tableitem of workstepInfo.tableNameDictionary;let i =index"
                                    [selected]="i==tabvalue">
                                </p-tabPanel>
                                <div class="col-xl-12">
                                    <div class="primeng-datatable-container processlabel">
                                        <p-table #dataTable [value]="workStepData" [paginator]="false" dataKey="id"
                                            [scrollable]="true" ScrollWidth="100%">
                                            <ng-template pTemplate="header">
                                                <tr>
                                                    <th style="width: 160px"
                                                        *ngFor="let headerItem of (workStepHeader&&workStepHeader.filedName?workStepHeader.filedName:[])">
                                                        {{headerItem}}
                                                    </th>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="body" let-record="$implicit"
                                                let-rowIndex="rowIndex">
                                                <tr>
                                                    <td style="width: 160px"
                                                        *ngFor="let headerprop of (workStepHeader&&workStepHeader.filedDesc?workStepHeader.filedDesc:[])">
                                                        <ng-container [ngSwitch]="headerprop">
                                                            <div *ngSwitchCase="'serialNum'">
                                                                <span>
                                                                    {{rowIndex+1}}
                                                                </span>
                                                            </div>
                                                            <!-- 多媒体字段 -->
                                                            <div *ngSwitchCase="'photoNo'">
                                                                <div class="imgList">
                                                                    <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                                    </p-lightbox> -->
                                                                    <span *ngIf="record[headerprop] == '否' || record[headerprop] == ''; else havePhoto">{{record[headerprop]}}</span>
                                                                    <ng-template #havePhoto>
                                                                        <a target="_blank" [href]="item.source"
                                                                        style="padding: 5px;"
                                                                        *ngFor="let item of getImagesNew(record[headerprop])">
                                                                        <img [src]="item.source" height="30px"
                                                                            width="30px">
                                                                    </a>
                                                                    </ng-template>
                                                                    <a target="_blank" [href]="item.source"
                                                                        style="padding: 5px;"
                                                                        *ngFor="let item of getVideo(record[headerprop])">
                                                                        <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div *ngSwitchCase="'secondPhotoNo'">
                                                                <div class="imgList">
                                                                    <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                                    </p-lightbox> -->
                                                                    <a target="_blank" [href]="item.source"
                                                                        style="padding: 5px;"
                                                                        *ngFor="let item of getImagesNew(record[headerprop])">
                                                                        <img [src]="item.source" height="30px"
                                                                            width="30px">
                                                                    </a>
                                                                    <a target="_blank" [href]="item.source"
                                                                        style="padding: 5px;"
                                                                        *ngFor="let item of getVideo(record[headerprop])">
                                                                        <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div *ngSwitchCase="'thirdPhotoNo'">
                                                                <div class="imgList">
                                                                    <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                                    </p-lightbox> -->
                                                                    <a target="_blank" [href]="item.source"
                                                                        style="padding: 5px;"
                                                                        *ngFor="let item of getImagesNew(record[headerprop])">
                                                                        <img [src]="item.source" height="30px"
                                                                            width="30px">
                                                                    </a>
                                                                    <a target="_blank" [href]="item.source"
                                                                        style="padding: 5px;"
                                                                        *ngFor="let item of getVideo(record[headerprop])">
                                                                        <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div *ngSwitchCase="'fourthPhotoNo'">
                                                                <div class="imgList">
                                                                    <!-- <p-lightbox [images]="getImage(record[headerprop])">
                                                                    </p-lightbox> -->
                                                                    <a target="_blank" [href]="item.source"
                                                                        style="padding: 5px;"
                                                                        *ngFor="let item of getImages(record[headerprop])">
                                                                        <img [src]="item.source" height="30px"
                                                                            width="30px">
                                                                    </a>
                                                                    <a target="_blank" [href]="item.source"
                                                                        style="padding: 5px;"
                                                                        *ngFor="let item of getVideo(record[headerprop])">
                                                                        <i class="pi pi-video" style="font-size: 2em;color:#5599FF;"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <!-- 操作人 1-5检 -->
                                                            <div *ngSwitchCase="'route'">
                                                                <span style="color: blue;cursor:pointer"
                                                                    (click)="showUrlInfo(record)">
                                                                    {{record[headerprop]}}
                                                                </span>
                                                            </div>
                                                            <div *ngSwitchCase="'firstOperator'">
                                                                <div style="padding: 5px;"
                                                                    *ngFor="let item of getUser(record[headerprop])">
                                                                    <a target="_blank" [href]="item.url"
                                                                        style="color: blue;cursor:pointer">{{item.name}}</a>
                                                                    <span style="margin-left: 5px;">{{item.time}}</span>
                                                                </div>
                                                            </div>
                                                            <div *ngSwitchCase="'secondOperator'">
                                                                <div style="padding: 5px;"
                                                                    *ngFor="let item of getUser(record[headerprop])">
                                                                    <a target="_blank" [href]="item.url"
                                                                        style="color: blue;cursor:pointer">{{item.name}}</a>
                                                                    <span style="margin-left: 5px;">{{item.time}}</span>
                                                                </div>
                                                            </div>
                                                            <div *ngSwitchCase="'thirdOperator'">
                                                                <div style="padding: 5px;"
                                                                    *ngFor="let item of getUser(record[headerprop])">
                                                                    <a target="_blank" [href]="item.url"
                                                                        style="color: blue;cursor:pointer">{{item.name}}</a>
                                                                    <span style="margin-left: 5px;">{{item.time}}</span>
                                                                </div>
                                                            </div>
                                                            <div *ngSwitchCase="'fourthOperator'">
                                                                <div style="padding: 5px;"
                                                                    *ngFor="let item of getUser(record[headerprop])">
                                                                    <a target="_blank" [href]="item.url"
                                                                        style="color: blue;cursor:pointer">{{item.name}}</a>
                                                                    <span style="margin-left: 5px;">{{item.time}}</span>
                                                                </div>
                                                            </div>
                                                            <div *ngSwitchCase="'fifthOperator'">
                                                                <div style="padding: 5px;"
                                                                    *ngFor="let item of getUser(record[headerprop])">
                                                                    <a target="_blank" [href]="item.url"
                                                                        style="color: blue;cursor:pointer">{{item.name}}</a>
                                                                    <span style="margin-left: 5px;">{{item.time}}</span>
                                                                </div>
                                                            </div>
                                                            <div *ngSwitchDefault>
                                                                {{record[headerprop]}}
                                                            </div>
                                                        </ng-container>
                                                    </td>
                                                </tr>
                                            </ng-template>
                                        </p-table>
                                        <div class="primeng-paging-container">
                                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                                #paginator (onPageChange)="searchRight()"
                                                [totalRecords]="workStepHeader.totalCount"
                                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">

                                            </p-paginator>
                                            <span class="total-records-count">
                                                总计:{{workStepHeader?workStepHeader.totalCount:0}}
                                            </span>
                                            <span class="total-records-count" style="margin-left: 5px;">
                                                视频数量:{{photoObj.videoNum?photoObj.videoNum:0}}
                                            </span>
                                            <span class="total-records-count" style="margin-left: 5px;">
                                                图片数量:{{photoObj.pictureNum ?photoObj.pictureNum :0}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </p-tabView>

                        </div>

                    </p-tabPanel>
                </p-tabView>
            </div>
        </div>
    </div>
    <!-- 点击路径查看信息 -->
    <look-path #path [detail]="rowData"></look-path>
</div>